<!DOCTYPE html>
<html>
<head>
    <title>详情展示</title>
    {% include 'admin/common/header.html' %}
    <link rel="stylesheet" href="{{ url_for('static', filename='/admin/admin/css/other/console1.css') }}"/>
</head>
<body>
<form class="layui-form" action="">
    <div class="mainBox">
        <div class="main-container" style="margin-top: 10px;font-size: 35px;color: #5e5e5e;font-weight: bold;text-align: center;width: 100%">个人训练评估</div>
        <div class="main-container"style="height: 270px;margin-top: 15px">
             <div class="layui-card"style="width: 50%;float:left; overflow:hidden">
              <div class="layui-card-header">作训警员信息</div>
               <div class="layui-card-body">
                <table class="layui-table" lay-skin="line",style="min-height:500px">
                    <thead>
                      <tr>
                        <th>属性</th>
                        <th>值</th>
                     </tr>
                    </thead>
                    <tbody>
                      <tr>
{#                        {{ user_name }}#}
                        <td>作训警员</td>
                        <td>{{train.user_name}}</td>
                    </tr>
                    <tr>

                        <td>作训情景</td>
                        <td>{{ train.train_name }}</td>
                    </tr>
                    <tr>
{#                        {{ training_time }}#}
                        <td>训练开始时间</td>
                        <td>{{train.start_time}}</td>
                    </tr>
                    <tr>
{#                        {{ training_time }}#}
                        <td>训练结束时间</td>
                        <td>{{train.end_time}}</td>
                    </tr>

                    </tbody>
                </table>
           </div>
             </div>
             <div class="layui-card"style="width: 45%;float:left; margin-left:10px;display:inline; overflow:hidden;">
                 <div class="layui-card-header">考核评价</div>
                 <div class="layui-card-body">
                     <div style="width: 100%;height: 205px;margin-left: 20px">
                          <img src="/static/images/goat.png" style="width: 35%;height: 100%;float:left; overflow:hidden">
                          <p style="font-weight: bold;font-size: 25px;color: #565c70;float:left; margin-left:20px;display:inline; overflow:hidden;margin-top:65px">作训成绩：{{ train.train_grade }}</p>
                     </div>
                 </div>
             </div>
         </div>
        <div class="main-container">

            <div id="score_1" style="background-color:#ffffff;min-height:500px;padding: 10px"></div>
         </div>


    <div class="layui-col-xs6 layui-col-md3">
            <div class="layui-card top-panel">
                <div class="layui-card-header">体征评估平均分</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs8 layui-col-md8 top-panel-number" style="color: #28333E;" id="value1">
                            8
                        </div>
                        <div class="layui-col-xs4 layui-col-md4 top-panel-tips">
                            <svg t="1678419143704" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5782" width="200" height="200">
                                <path d="M512 891.3a102.4 102.4 0 0 1-73.2-30L136 555.6a248.9 248.9 0 0 1 0-350A243.5 243.5 0 0 1 310 132.7a243.5 243.5 0 0 1 174.1 72.7l27.8 27.9L540 205.4a244.8 244.8 0 0 1 348.2 0 248.9 248.9 0 0 1 0 350l-303 305.4a102.4 102.4 0 0 1-73.2 30.5z" fill="#3F86FF" p-id="5783"></path>
                                <path d="M544 664a24 24 0 0 1-21.5-13.3L416 437.7l-42.5 85a24 24 0 0 1-21.5 13.3H224.3a24 24 0 0 1 0-48h112.9l57.3-114.7a24 24 0 0 1 43 0l106.5 213 42.4-85a24 24 0 0 1 21.5-13.3H800a24 24 0 0 1 0 48H622.8l-57.3 114.7a24 24 0 0 1-21.5 13.3z" fill="#FFFFFF" opacity=".75" p-id="5784"></path>
                                <path d="M544 664a24 24 0 0 1-21.5-13.3L416 437.7l-42.5 85a24 24 0 0 1-43-21.4l64-128a24 24 0 0 1 43 0l106.5 213 42.4-85a24 24 0 1 1 43 21.4l-63.9 128a24 24 0 0 1-21.5 13.3z" fill="#FFFFFF" p-id="5785"></path>
                            </svg>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    <div class="layui-col-xs6 layui-col-md3">
            <div class="layui-card top-panel">
                <div class="layui-card-header">行为评估平均分</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs8 layui-col-md8 top-panel-number" style="color: #28333E;" id="value2">
                            10
                        </div>
                        <div class="layui-col-xs4 layui-col-md4 top-panel-tips">
                            <svg t="1678422333121" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5766" width="200" height="200">
                                <path d="M834.076533 575.04046a136.642751 136.642751 0 0 0-136.365697 136.365698 132.985646 132.985646 0 0 0 18.895044 68.820071L583.731055 871.376807l-106.610159-155.870259-164.902201 112.539103a136.033233 136.033233 0 0 0-122.734669-77.187085c-3.158409 0-6.316818 0-9.253584 0.443285a386.212479 386.212479 0 0 1 321.880673-170.387858 297.167507 297.167507 0 0 0 41.336372 2.936766 291.903492 291.903492 0 1 0-162.40872-49.537153 449.491483 449.491483 0 0 0-299.217703 269.628397 135.035841 135.035841 0 0 0-28.758146 83.503903 136.310287 136.310287 0 0 0 272.34352 8.200782l135.312895-92.535846 106.388517 155.648617 193.9374-132.376129a136.365698 136.365698 0 1 0 73.252926-251.34287zM314.545944 292.002677a228.790721 228.790721 0 1 1 228.6799 228.6799 228.956953 228.956953 0 0 1-228.6799-228.73531zM189.262384 960.698833a73.419159 73.419159 0 1 1 73.419158-73.419159 73.52998 73.52998 0 0 1-73.419158 73.419159z m644.758739-175.818106a73.419159 73.419159 0 1 1 73.419158-73.419159 73.52998 73.52998 0 0 1-73.363748 73.363748z" fill="#3B9DFF" p-id="5767"></path>
                            </svg>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    <div class="layui-col-xs6 layui-col-md3">
            <div class="layui-card top-panel">
                <div class="layui-card-header">情绪评估平均分</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs8 layui-col-md8 top-panel-number" style="color: #28333E;" id="value3">
                            9
                        </div>
                        <div class="layui-col-xs4 layui-col-md4 top-panel-tips">
                            <svg t="1678422583063" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6326" width="200" height="200">
                                <path d="M512 0C229.376 0 0 229.376 0 512s229.376 512 512 512 512-229.376 512-512S794.624 0 512 0z m198.144 250.88c29.184 0 53.248 36.352 53.248 80.896s-23.552 80.896-53.248 80.896c-29.184 0-53.248-36.352-53.248-80.896S680.96 250.88 710.144 250.88z m-396.288 0c29.184 0 53.248 36.352 53.248 80.896s-23.552 80.896-53.248 80.896c-29.184 0-53.248-36.352-53.248-80.896 0-44.544 24.064-80.896 53.248-80.896zM512 849.92c-156.672 0-283.136-124.928-283.136-279.04 0 0 121.344-23.04 278.016-23.04s288.768 23.04 288.768 23.04c-0.512 154.112-126.976 279.04-283.648 279.04z" fill="#1296db" p-id="6327"></path>
                            </svg>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    <div class="layui-col-xs6 layui-col-md3">
            <div class="layui-card top-panel">
                <div class="layui-card-header">姿态评估平均分</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs8 layui-col-md8 top-panel-number" style="color: #28333E;" id="value4">
                            8
                        </div>
                        <div class="layui-col-xs4 layui-col-md4 top-panel-tips">
                            <svg t="1678422894833" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3188" width="200" height="200">
                                <path d="M615.168 583.264c-12.608-20.096-17.504-64.096 30.752-159.84a32.064 32.064 0 0 0-8.064-38.944c-0.448-0.352-0.992-0.48-1.44-0.832 1.216 0.032 2.368 0.352 3.584 0.352 88.224 0 160-71.776 160-160s-71.776-160-160-160-160 71.776-160 160c0 76.16 53.632 139.84 125.024 155.872-2.368 0.992-4.8 1.952-6.944 3.552l-218.976 164.352a32 32 0 1 0 38.4 51.168l130.848-98.208c-10.656 47.68-6.432 86.208 12.608 116.512 9.28 14.848 19.168 28.16 28.608 40.832 29.728 39.904 43.584 60.768 33.888 99.296-7.264 28.768-34.368 80.832-122.336 165.312a32 32 0 0 0 44.352 46.208c80.544-77.344 126.336-141.408 140.064-195.872 17.568-69.664-14.016-112.096-44.608-153.12-8.48-11.424-17.408-23.328-25.76-36.64zM544 224c0-52.928 43.072-96 96-96s96 43.072 96 96-43.072 96-96 96-96-43.072-96-96z" p-id="3189" fill="#1296db"></path>
                                <path d="M288 516.864a244.8 244.8 0 0 1 72.16-174.24 31.968 31.968 0 1 0-45.248-45.248C256.288 356 224 433.952 224 516.864s32.288 160.896 90.912 219.488a31.904 31.904 0 0 0 45.248 0 31.968 31.968 0 0 0 0-45.248A244.8 244.8 0 0 1 288 516.864z" p-id="3190" fill="#1296db"></path>
                                <path d="M128 520.096c0-115.392 44.928-223.872 126.528-305.472A31.968 31.968 0 1 0 209.28 169.376 492.736 492.736 0 0 0 64 520.096c0 132.48 51.584 257.024 145.28 350.72a31.904 31.904 0 0 0 45.248 0 31.968 31.968 0 0 0 0-45.248A429.216 429.216 0 0 1 128 520.096zM875.008 737.28c-31.744-73.024-83.104-126.272-152.608-158.336a31.968 31.968 0 1 0-26.816 58.112c55.552 25.632 95.072 66.752 120.704 125.728a1089.92 1089.92 0 0 1 64.8 201.696 32 32 0 0 0 62.528-13.664 1155.296 1155.296 0 0 0-68.608-213.536zM923.744 509.024c-41.856 8.064-79.616 5.024-115.584-9.44-34.624-13.984-59.456-35.776-75.904-66.656a32 32 0 0 0-56.512 30.112c23.488 44.032 60 76.32 108.48 95.872a254.528 254.528 0 0 0 95.968 18.432c18.208 0 36.832-1.856 55.744-5.536a32 32 0 0 0-12.192-62.784z" p-id="3191" fill="#1296db"></path>
                            </svg>
                        </div>

                    </div>
                </div>
            </div>
        </div>

<!--         <div  style="color: white">训练现场实时录制</div>-->
            <div class="layui-card-header">训练现场录制回放</div>
                    <div class="layui-card-body">
                        <div class="layui-col-md6">
                            <video width="98%" height="98%" controls autoplay>
                              <source src="http://localhost:8887/video.mp4" type="video/mp4">
                              <source src="movie.ogg" type="video/ogg">
                              <source src="movie.webm" type="video/webm">
                              您的浏览器不支持 video 属性。
                            </video>
                            <div style="color: white">1机位</div>
                        </div>
                        <div class="layui-col-md6">
                            <video width="98%" height="98%" controls autoplay>
                              <source src="http://localhost:8887/video.mp4" type="video/mp4">
                              <source src="movie.ogg" type="video/ogg">
                              <source src="movie.webm" type="video/webm">
                              您的浏览器不支持 video 属性。
                            </video>
                            <div style="color: white">2机位</div>
                        </div>
                    </div>

    </div>

</form>
{% include 'admin/common/footer.html' %}


<script type="text/html" id="police-updateTime">
    {{ '  {{layui.util.toDateString(d.update_at,  "yyyy-MM-dd HH:mm:ss")}' |safe }}}
</script>

<script>


layui.use(['layer', 'echarts', 'element', 'count'], function () {
var chartDom = document.getElementById('score_1');
var myChart = echarts.init(chartDom);
var option;
var name = '张三'
setTimeout(function () {
  option = {
    title: {
<!--        text: '个人训练评估',-->
<!--        subtext: '作训警员: '+name,-->
        left: 'center',
        textStyle:{
            fontSize: 22
        }

    },
    legend: {
        orient: 'horizontal',
        "left": "center",
        "data": ["", "情绪状态评估得分", "行为规范评估得分", "体征况况评估得分", "动作姿态评估得分"],
<!--        "textStyle": {-->
<!--            "fontSize": 15-->
<!--        }-->

    },
    tooltip: {
      trigger: 'axis',
      showContent: false
    },
    dataset: {
      source: [
        ['训练科目', '{{ t1 }}', '{{ t2 }}', '{{ t3 }}', '{{ t4 }}', '{{ t5 }}', '{{ t6 }}'],
        ['情绪状态评估得分', 5, 8, 8, 7, 5, 8],
        ['行为规范评估得分', 5, 5, 5, 5, 7, 6],
        ['体征况况评估得分', 4, 6, 6, 3, 4, 3],
        ['动作姿态评估得分', 2, 3, 4, 1, 3, 4]
      ]
    },
    xAxis: { type: 'category' },
    yAxis: { gridIndex: 0 },
    grid: {
        top: '35%',
        x: 30,
<!--        y: 50,-->
        x2: 500
    },
    series: [
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
      },
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
      },
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
      },
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
      },
      {
        type: 'pie',
        id: 'pie',
        radius: '45%',
        center: ['85%', '55%'],
        emphasis: {
          focus: 'self'
        },
        label: {
          formatter: '{b}: {@10分钟} ({d}%)',
          textStyle: {
<!--            fontSize: 18-->
        }
        },
        encode: {
          itemName: '训练科目',
          value: '10分钟',
          tooltip: '10分钟'
        }
      }
    ]
  };
  myChart.on('updateAxisPointer', function (event) {
    const xAxisInfo = event.axesInfo[0];
    if (xAxisInfo) {
      const dimension = xAxisInfo.value + 1;
      myChart.setOption({
        series: {
          id: 'pie',
          label: {
            formatter: '{b}: {@[' + dimension + ']} ({d}%)'
          },
          encode: {
            value: dimension,
            tooltip: dimension
          }
        }
      });
    }
  });
  myChart.setOption(option);
});

option && myChart.setOption(option);
})


</script>
</body>
</html>